<template>
	<view>
		<u-navbar back-text="返回" title="托管详情" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<!-- 顶部 -->
		<view class="top-box">
			成都市招木工<text>
				编号:ZW12345
			</text>
		</view>
		<!-- 顶部 -->
		<!-- 用户信息 -->
		<view class="content">
			<view class="user-item">
				<view class="title">
					<view>
						张三
					</view>
					<view class="day-num">
						8
					</view>
					<view class="text">
						天
					</view>
					<view class="money-num">
						800
					</view>
					<view class="text">
						元/天
					</view>
				</view>
				<view class="user-info">
					<view class="info-item">
						<view class="left">
							托管编号: <text>TG12345</text>
						</view>
						<view class="left right">
							托管时间: <text>2020.02.02</text>
						</view>
					</view>
					<view class="info-item">
						<view class="left">
							工资合计: <text>￥54000.00</text>
						</view>
						<view class="left right">
							申请时间: <text>2020.02.02</text>
						</view>
					</view>
					<view class="info-item">
						<view class="left">
							确认时间: <text>2020.02.02</text>
						</view>
						<view class="left right">
							发放时间: <text>2020.02.02</text>
						</view>
					</view>
				</view>
				<view class="user-foot">
					<view class="left-fill">
					</view>
					<view class="right-box">
						<view class="text">
							工资合计:
						</view>
						<view class="money">
							￥54000.00
						</view>
						<view class="right-btn">
							确认发放
						</view>
					</view>
				</view>
			</view>
			<view class="user-item">
				<view class="title">
					<view>
						张三
					</view>
					<view class="day-num">
						8
					</view>
					<view class="text">
						天
					</view>
					<view class="money-num">
						800
					</view>
					<view class="text">
						元/天
					</view>
				</view>
				<view class="user-info">
					<view class="info-item">
						<view class="left">
							托管编号: <text>TG12345</text>
						</view>
						<view class="left right">
							托管时间: <text>2020.02.02</text>
						</view>
					</view>
					<view class="info-item">
						<view class="left">
							工资合计: <text>￥54000.00</text>
						</view>
						<view class="left right">
							申请时间: <text>2020.02.02</text>
						</view>
					</view>
					<view class="info-item">
						<view class="left">
							确认时间: <text>2020.02.02</text>
						</view>
						<view class="left right">
							发放时间: <text>2020.02.02</text>
						</view>
					</view>
				</view>
				<view class="user-foot">
					<view class="left-fill">
					</view>
					<view class="right-box">
						<view class="text">
							工资合计:
						</view>
						<view class="money">
							￥54000.00
						</view>
						<view class="await-apply">
							待工人申请
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户信息 -->
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.top-box{
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 10rpx solid rgba(245,245,245,1);
		font-size:36rpx;
		font-weight:bold;
		line-height:48rpx;
		color:rgba(51,51,51,1);
		opacity:1;
		text{
			display: inline-block;
			margin-left: 30rpx;
			font-size:24rpx;
			font-weight:400;
			line-height:32rpx;
			color:rgba(51,51,51,1);
			opacity:1;
		}
	}
	.content{
		padding: 0 30rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.user-item{
			margin-top: 40rpx;
			width: 100%;
			.title{
				font-size:28rpx;
				font-weight:bold;
				line-height:37rpx;
				color:rgba(51,51,51,1);
				opacity:1;
				display: flex;
				.day-num{
					margin-left: 30rpx;
					margin-right: 10rpx;
				}
				.money-num{
					margin-left: 30rpx;
					margin-right: 10rpx;
				}
				.text{
					font-size:26rpx;
					font-weight:400;
					color:rgba(51,51,51,1);
					opacity:1;
				}
			}
			.user-info{
				margin-top: 34rpx;
				.info-item{
					margin-bottom: 25rpx;
					display: flex;
					.left{
						font-size:22rpx;
						font-weight:400;
						line-height:35px;
						color:rgba(153,153,153,1);
						opacity:1;
						text{
							display: inline-block;
							margin-left: 10rpx;
							font-size:26rpx;
							font-weight:400;
							line-height:35px;
							color:rgba(51,51,51,1);
							opacity:1;
						}
					}
					.right{
						margin-left: 100rpx;
					}
				}
			}
			.user-foot{
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid rgba(223,223,223,1);
				margin-top: 40rpx;
				display: flex;
				.left-fill{
					flex: 1;
				}
				.right-box{
					display: flex;
					line-height: 90rpx;
					font-size:22rpx;
					font-weight:400;
					color:rgba(153,153,153,1);
					opacity:1;
					.money{
						margin-left: 10rpx;
						font-size:26rpx;
						font-weight:400;
						color:rgba(255,0,0,1);
						opacity:1;
					}
					.right-btn{
						width:220rpx;
						height:90rpx;
						background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
						opacity:1;
						border-radius:8rpx;
						margin-left: 50rpx;
						font-size:30rpx;
						font-weight:400;
						color:rgba(255,255,255,1);
						opacity:1;
						text-align: center;
					}
					.await-apply{
						width:220rpx;
						height:90rpx;
						background:rgba(255,255,255,1);
						border:1rpx solid rgba(211,176,104,1);
						border-radius:8rpx;
						text-align: center;
						margin-left: 50rpx;
						font-size:30rpx;
						font-weight:400;
						color:rgba(211,176,104,1);
						opacity:1;
					}
				}
			}
		}
	}
</style>
